<?php include ("api.php"); ?>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style.css">
	 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

		<script src="js/simpleStreamer.js"></script>		
		<script src="js/script.js"></script>
		<script src="js/mustache.min.js"></script>		
		<script src="js/cards.counter.js"></script>

		<script src="bootstrap/js/bootstrap-datepicker.js"></script>

	</head>
	<body role="document" id="game">
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		  <div class="container-fluid">
		    <div class="navbar-header">
				<div id="navbar" class="navbar-collapse collapse">
				 	 <ul class="nav navbar-nav navbar-left">  
							<li><a href="<?=FRONT_URL?>">Card Counters</a></li>
						  <li><div class="game-controller game-controller-username"></div></li>
				 	 </ul>
				</div>
		
				 	 
		  </div>
		</nav>


		<div class="row " style="margin-top:60px">


			<div class="col-md-4 ">
				<div class="myDigits">
					<div class="game-mon2"></div>
				</div>
				
				<div id="meilleursScores" data-action="getBestScores" data-ping="10000" data-controller="scores">
					<script class="main" type="x-tmpl-mustache">
						<h2>Meilleurs temps</h2>
						<div class='appendable'></div>
						<div class='editZone'></div>
					</script>
					<script class="viewItem" type="x-tmpl-mustache">
						<div class="panel panel-default">
							<div class="panel-body">
								<span class="label label-danger">{{timeRender}} secondes</span> {{created}} {{pseudo}}
							</div>
						</div>
					</script>					
					<script class="editItem" type="x-tmpl-mustache">
						<input  type="text" name="content" />
					</script>		
				</div>
								
				<div class="well">
					<div id="miniChat" data-action="index" data-ping="1000" data-controller="messages" data-nbritems="4" data-canadd="true">
						
						<script class="main" type="x-tmpl-mustache">
							
							<div class='appendable'></div>
							<div class='editZone'></div>
							
						</script>
						
						<script class="viewItem" type="x-tmpl-mustache">
							<div class="panel panel-default">
								<div class="panel-body">
									{{pseudo}}: {{message}}
								</div>
							</div>
						</script>
						
						<script class="editItem" type="x-tmpl-mustache">
							<div class="form-group form-inline">
								<form name="itemEdit" class="form-inline">
								
									<input 
										class="form-control" 
										type="text" 
										name="pseudo" 
										placeholder="pseudo" 
										size="9" 
										data-stickydata="true" 
										data-required="true" />
								
									<input  
										class="form-control" 
										type="text"
										name="message"
										size="20"
										placeholder="message" 
										data-required="true" />
									
									<button 
										class="btn btn-default "  
										type="submit" 
										value="Ok" 
										class="submit" >Ok</button>
									
								</form>
							</div>
						</script>
						
					</div>						
				</div>										
			</div>

			<div class="col-md-4">
			
				<div  class="row">
					<div class="col-md-3 text-center">
						<div class="game-mon1"></div>
			
						<div class="well well-lg">
							<div class="game-mon3"></div>
						</div>
					</div>
					
					<div class="col-md-9">
						<div class="well well-lg">
							<div class="game-main">
								<br><br>
							</div>
						</div>
					</div>
				</div>
				
				<div  class="row">
					<div class="col-md-12">
						<div class="well well-lg">
							<p>
								<div class="game-controller game-controller-reload">
								</div>
							</p>
						
							<p>
								<div class="game-controller game-controller-checkUserResult">
								</div>
							</p>
							
							<div class="game-mon4"></div>	
						</div>
						
					</div>
				<div>

			</div>	
			
			</div>
		</div>

			<div class="col-md-3">	
				<div id="derniersScores" data-action="get" data-controller="scores" data-ping="3000" data-nbritems="5">
					<script class="main" type="x-tmpl-mustache">
						<div class='appendable'></div>
						<div class='editZone'></div>
					</script>
					<script class="viewItem" type="x-tmpl-mustache">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">
									{{timeRender}} secondes
								</h3>
							</div>
							<div class="panel-body">
								{{created}} {{pseudo}}
							</div>
						</div>
					</script>					
					<script class="editItem" type="x-tmpl-mustache">
						<input  type="text" name="content" />
					</script>		
				</div>
			</div>
		
		</div>




	</body>
</html>
